<template>
    <section id="section">
      <div v-if="noArticle" class="nomedrecord">
        <p style="height:90px;line-height:90px;font-size: 14px;font-weight: bold;color: gray;">您还没有文章可查看</p>
        <img src="../../assets/pic.png" alt="" width="200px">
      </div>
      <div v-else style="padding-top: 20px;" v-for="item in articlelist" @click="articledetial(item)">
      <div class="card">
        <div class="content">
          <img :src="img" alt="">
          <div class="txt">
            <p class="p1">{{item.Title}}</p>
            <p class="p2">作者：{{item.Author}}</p>
            <p class="p3">{{setNum(item.CreateTime)}}</p>
          </div>
        </div>
      </div>
      </div>
    </section>
</template>

<script>
  import {getArticleList} from "../../api/api"
    export default {
        props: [],
        name: 'app',
        data(){
            return {
              noArticle:false,
              img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2425063166,1413401402&fm=26&gp=0.jpg",
              articlelist:[],
            }
        },
        computed: {},
        components: {},
        created(){
        },
        methods: {
          articledetial(Content){
              console.log(Content);
              this.$router.push(
                {
                  name:"文章详情",
                  params:{content:Content}
                }

              );
          },
          getArticleList(){
              let params={
                Title:"",
                StartTime:"",
                EndTime:"",
                PageSize:100,
                CurrentPage:1
              };
            getArticleList(params).then(res=>{
              this.articlelist=res.data.Result;
              if(this.articlelist.length>0){
                this.noArticle=false;
              }
              else{
                this.noArticle=true;
              }
            });

          },
          setNum(item) {
            if (item) {
              return item.slice(0, 10);
            }
          },
        },
        mounted() {
          this.getArticleList();
          document.getElementById("section").style.minHeight=localStorage.getItem("windowHeight")+"px";
        },
        destroyed(){
        }
    }
</script>

<style lang="scss" scoped>
  #section{
    background-color: rgba(220, 220, 220, 0.2) !important;
  }
  .card{
    width:95%;
    margin: 0 auto;
    overflow: hidden;
    .date{
      width:100%;
      height: 40px;
      background-image: url("../../assets/blue.png");
      background-size: auto 40px;
      font-size: 20px;
      color: white;
      letter-spacing: 3px;
      line-height: 40px;
      text-align: left;
      padding-left: 25px;
    }
    .content {
      width: 90%;
      height: 120px;
      border-radius: 5px;
      background-color: white;
      padding-left: 5%;
      padding-right: 5%;
      img {
        width:30%;
        height: 100px;
        border-radius: 5px;
        float: left;
        vertical-align: middle;
        margin-top: 10px;
        margin-right: 2%;
      }
      .txt{
        width: 65%;
        height: 100px;
        float: right;
        margin-top: 10px;
        .p1{
          width: 100%;
          height: 40px;
          text-align: left;
          font-size: 16px;
          line-height:40px;
        }
        .p2{
          width: 100%;
          height: 40px;
          line-height:17.5px;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:3;
          font-size: 13px;
          color: gray;
          text-align: left;
        }
        .p3{
          width: 100%;
          height: 30px;
          text-align: left;
          font-size: 13px;
          color: #525252;
        }
      }
    }
  }

</style>
